Release 10.1A: OpenEdge Development:
Progress Dynamics Web Development Guide

Applying your own style sheets

There are two methods for applying your own CSS files to your Progress Dynamics Web application:

Edit the default.htm layout file and change the style sheet links so that they point to your own CSS files.

The following example shows the HTML markup for these links:

<link rel="stylesheet" type="text/css" href="../dhtml/rymain.css" /> <td id="app" dyn="" css="../dhtml/ryapp.css">

Change the markup displayed in bold so that the links point to your own CSS files.

Add the name of your CSS file to the StyleSheetFile attribute in a property sheet.

Use this method when you want to override the style sheets linked to in the default.htm layout file to apply a style to a particular object.

The files specified in the StyleSheetFile attribute override the style sheet files specified in the default.htm layout file.

You can specify a number of files in the StyleSheetFile attribute. The order in which you add CSS files is important. The last file in the list overrides the settings in preceding files.

To associate your own CSS file with your Web application, add the filename to the StyleSheetFile attribute. The StyleSheetFile attribute is listed in the Dynamics Property Sheet dialog box. If you want to apply a CSS file to a particular object, open the object in AppBuilder and then select Window Dynamic Property Sheet. If you want to apply a CSS file to a container, open the container in the Container Builder and then select Advanced Properties.

As shown in Figure 5–4, the value for StyleSheetFile is a comma-delimited list of CSS files. The UI Manager adds a reference to each CSS file in the list to the HTML header of the Web application page that it sends to a client.



Figure 5–4: StyleSheetFile in the Dynamic Properties dialog box